<template>
  <el-dialog width="510px" :title="title" :visible.sync="dialogFormVisible">
    <el-form>
      <el-form-item label="设备类型：" :label-width="formLabelWidth">
        <el-select v-model="formData.deviceType" size="medium" class="el_input" placeholder="请选择">
          <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="标段：" :label-width="formLabelWidth">
        <el-select
          class="el_input"
          size="medium"
          v-model="formData.bidSection"
          clearable
          placeholder="请选择"
          @change="getWorkAreaList">
          <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属工区：" :label-width="formLabelWidth">
        <el-select class="el_input" size="medium" v-model="formData.areaId" clearable placeholder="请选择">
          <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备序列号：" :label-width="formLabelWidth">
        <el-input class="el_input" size="medium" v-model="formData.deviceKey" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="设备名称：" :label-width="formLabelWidth">
        <el-input class="el_input" size="medium" v-model="formData.deviceCnName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="视频源地址：" :label-width="formLabelWidth">
        <el-input class="el_input" size="medium" type="textarea" :rows="3" v-model="formData.deviceUrl" placeholder="请输入" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="confirmModifData">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HttpInterface from "../../../util/httpInterface";
import { mapState, mapActions } from "vuex";

export default {
  components: {},
  data() {
    return {
      title: "添加视频源信息",
      dialogFormVisible: false,
      formLabelWidth: "96px",
      id: 0,
      formData: {
        deviceCnName: "",
        deviceUrl: "",
        deviceType: "1",
        deviceKey: "",
        bidSection: "",
        areaId: "",
      },
      deviceTypeList: [
        { value: "1", label: "乐橙云" },
        { value: "2", label: "萤石" }
      ],
      workAreaInfo: [],
    };
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  methods: {
    ...mapActions(["selectByBidSection"]),

    confirmModifData() {
      if (this.id == 0) {
        this.addDeviceInfo();
      } else {
        this.modifDeviceInfo();
      }
    },

    getWorkAreaList() {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.formData.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    // 添加信息
    addDeviceInfo () {
      let _this = this;
      let { formData } = this;
      if (!formData.bidSection) return this.warningMessage("请选择标段信息");
      let parmas = formData;
      HttpInterface.requestPost(this, HttpInterface.URL_INSERT_CAMERA_DEVICE, parmas, function (res) {
        var data = res.data;
        if (data.success) {
          _this.dialogFormVisible = false;
          _this.$parent.refreshListData();
          _this.successMessage("添加成功");
        } else {
          _this.errorMessage("添加失败");
        }
      }, null, false)
    },

    // 获取数据详情
    getCarInfo (id) {
      let _this = this;
      let parmas = { id };
      HttpInterface.requestGet(this, HttpInterface.URL_GET_BY_CAMERA_DEVICE_ID, parmas, function (res) {
        var { success, other } = res.data;
        if (success) {
          other.deviceType = other.deviceType.toString();
          _this.formData = other;
          _this.getWorkAreaList();
        }
      }, null)
    },

    // 修改信息
    modifDeviceInfo () {
      let _this = this;
      let parmas = this.formData;
      HttpInterface.requestPost(this, HttpInterface.URL_UPDATE_CAMERA_DEVICE, parmas, function (res) {
        var data = res.data;
        if (data.success) {
          _this.dialogFormVisible = false;
          _this.$parent.refreshListData();
          _this.successMessage(data.msg);
        }
      }, null, false)
    },

    show(id) {
      this.dialogFormVisible = true;
      if (id) {
        this.title = "编辑视频源信息";
        this.id = id;
        this.getCarInfo(id);
      } else {
        this.formData = {
          deviceCnName: "",
          deviceUrl: "",
          deviceType: "1",
          deviceKey: "",
          areaId: ""
        };
        this.title = "添加视频源信息";
      }
    }
  }
};
</script>

<style  scoped>
.el_input {
  width: 230px;
}

.el-dialog__wrapper >>> .el-dialog__body .el-form{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-dialog__wrapper >>> .el-dialog__body .el-form .el-form-item {
  margin: 6px 0 !important;
}
</style>
